<template>
  <div class="user-add-or-update">
    <el-drawer :title="this.rowData.btn == 1 ? '审核' : '查看'" :visible.sync="drawer" custom-class="demo-drawer" direction="rtl" :destroy-on-close="true" :key="this.rowData.id" size="60%">
      <div class="demo-drawer__content">
        <div :style="cardHeightStyle" class="rightScrollNone">
          <el-form size="mini" :model="dataForm" :rules="rules" ref="vendorRuleForm">
            <el-row>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="申请人">
                  <el-input autocomplete="off" type="text" v-model="dataForm.name" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="手机号">
                  <el-input autocomplete="off" type="text" v-model="dataForm.phone" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="rowData.btn == 1">
                <el-form-item :label-width="formLabelWidth" label="">
                  <h2 class="feijiu_f">feijiu资料</h2>
                  <p class="feijiu_f">
                    <span>Feijiu用户：{{ feijiuDate.is_feijiu_user }}</span
                    ><span>Feijiu会员：{{ feijiuDate.feijiu_member }}</span>
                  </p>
                  <p class="feijiu_f">Feijiu公司名称：{{ feijiuDate.feijiu_company }}</p>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth" label="">
                  <h2 class="feijiu_f">群聊信息</h2>
                  <p class="feijiu_f">
                    <span>已加入：{{ feijiuDate.power_success }}个</span><span>审核中：{{ feijiuDate.power_await }}个</span><span>审核驳回：{{ feijiuDate.power_refuse }}个</span>
                  </p>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="企业名称" prop="company">
                  <el-input autocomplete="off" type="text" v-model="dataForm.company" :disabled="!rowData.btn"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="企业介绍" prop="info">
                  <el-input autocomplete="off" type="textarea" v-model="dataForm.info" :disabled="!rowData.btn"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="所属小程序" prop="group__cate__project__name">
                  <el-select v-model="dataForm.group__cate__project__name" placeholder="请选择" style="width: 100%" @change="wxproject1" :disabled="!rowData.btn">
                    <el-option v-for="(item, index) in project1" :key="index" :label="item.key" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="群聊" prop="group__name">
                  <el-select v-model="dataForm.group__name" placeholder="请选择" style="width: 100%" filterable @change="selectgroup" :disabled="!rowData.btn">
                    <el-option v-for="(item, index) in project" :key="index" :label="item.key" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="!rowData.btn">
                <el-form-item :label-width="formLabelWidth" label="审核结果">
                  {{ dataForm.power_sts == 2 ? '通过' : '驳回（驳回理由：' + dataForm.refuse_reason + ')' }}
                  <!-- <el-input autocomplete="off" type="textarea" v-model="dataForm.refuse_reason" :disabled="!rowData.btn" ></el-input> -->
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="demo-drawer__footer" v-if="rowData.btn">
          <!-- cancelForm -->

          <el-button size="mini" @click="reject" type="danger">驳回</el-button>
          <el-button size="mini" :loading="loading" @click="dataFormSubmit" type="primary">通过</el-button>
        </div>
      </div>
    </el-drawer>

    <!--驳回-->
    <el-dialog title="提示" :visible.sync="dialogTableVisible" width="30%">
      <el-form size="mini" :model="form" :rules="rules" ref="form">
        <el-form-item label="审核结果" label-width="140px">
          <span>审核驳回</span>
        </el-form-item>
        <el-form-item label="驳回理由" label-width="140px" prop="refuse_reason">
          <el-input autocomplete="off" type="textarea" v-model="form.refuse_reason"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="textMessageReset('form')">取 消</el-button>
        <el-button size="mini" :loading="false" type="primary" @click="outboundCallSubmit('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { group_select, group_power_one, noticebase, power_info, group_power } from '@/api/wxapplet/index.js'

export default {
  data() {
    return {
      dialogTableVisible: false,
      timeOutCount: 0,
      showNumInput: false,
      refNum: 0,
      dataForm: {
        id: '',
        name: '', // 用户名
        phone: '',
        project_id: '',
        company: '',
        info: '',
        group_id: '',
        group__name: '',
        group__cate__project__name: '',
        group__cate__project_id: '',
        refuse_reason: '',
        power_sts: '',
      },
      feijiuDate: {},
      form: {
        //驳回理由
        refuse_reason: '',
      },
      project: [],
      project1: [],
      rowData: {
        btn: 0,
      },
      formLabelWidth: '150px',
      loading: false,
      drawer: false,
      rules: {
        name: [{ required: true, message: '申请人不能为空', trigger: 'blur' }],
        phone: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
        company: [{ required: true, message: '企业名称不能为空', trigger: 'blur' }],
        info: [{ required: true, message: '企业介绍不能为空', trigger: 'blur' }],
        group__name: [{ required: true, message: '群聊不能为空', trigger: 'blur' }],
        group__cate__project__name: [{ required: true, message: '所属小程序不能为空', trigger: 'blur' }],
        refuse_reason: [{ required: true, message: '请输入拒绝原因', trigger: 'blur' }],
      },
    }
  },
  mounted() {
    console.log(this.rowData == null)
    // this.gainwxList({})
    noticebase({}).then((res) => {
      // 所属小程序
      this.project1 = res.data.project
    })
  },
  computed: {
    cardHeightStyle() {
      let documentClientHeight = document.body.clientHeight
      const height = documentClientHeight - 80 - 80
      return {
        height: height + 'px',
        'overflow-y': 'scroll',
        'padding-right': '20px;',
      }
    },
  },

  methods: {
    selectgroup(val) {
      this.dataForm.group_id = val
    },
    // 选择所属小程序
    wxproject1(val) {
      this.dataForm.group__name = ''
      let info = {
        project_id: val,
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      this.gainwxList(formData)
    },
    // 所属群聊接口
    gainwxList(data) {
      group_select(data).then((res) => {
        console.log(res)
        // 群聊
        this.project = res.data.project
      })
    },

    // 新增
    Add(params) {
      return group_power_one(params)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success('审核成功')
          }
        })
        .catch((res) => {
          this.$message.error('审核失败')
        })
    },
    //   提交
    dataFormSubmit() {
      this.$refs.vendorRuleForm.validate((flag) => {
        if (flag) {
          let data = this.dataForm
          data.group_id = data.group_id == '' ? data.group__name : data.group_id
          delete data.group__name

          data.project_id = data.group__cate__project_id == '' ? data.group__cate__project__name : data.group__cate__project_id
          delete data.group__cate__project__name
          delete data.group__cate__project_id
          console.log(data)

          const info = Object.assign(data)
          const formData = new FormData()
          for (let key in info) {
            formData.set(key, info[key])
          }

          // var request = this.rowData ? this.Edit(formData) : this.Add(formData);
          var request = this.Add(formData)

          request
            .then((d) => {
              this.cancelForm()
              this.$emit('refreshList')
              this.$store.dispatch('tagsView/aaa')
            })
            .catch((d) => {
              this.cancelForm()
            })
        }
      })
    },
    // 驳回
    reject() {
      this.dialogTableVisible = true
      console.log(222222)
    },
    // 取消驳回
    textMessageReset(formName) {
      this.$refs[formName].resetFields()
      this.dialogTableVisible = false
    },
    // 确定驳回
    outboundCallSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const info = Object.assign(this.form)
          info.ids = [this.dataForm.id]
          info.sts = 3
          const formData = new FormData()
          for (let key in info) {
            formData.set(key, info[key])
          }
          group_power(formData)
            .then((res) => {
              if (res.code == '200') {
                this.textMessageReset('form')
                this.$message.success('驳回成功')
                this.cancelForm()
                this.$emit('refreshList')
                this.$store.dispatch('tagsView/aaa')
              }
            })
            .catch((e) => {
              this.cancelForm()
              this.$message.error('驳回失败')
            })
        }
      })
    },

    //   关闭弹出层
    cancelForm() {
      this.cleanInfo()
      this.loading = false
      this.drawer = false
    },
    //   打开弹出层
    open(row, role) {
      if (this.drawer) {
        return
      }

      this.rowData = row || null
      this.drawer = true
      this.openHook()
      // this.getshcoolselect()
    },
    clearData() {
      this.$refs.vendorRuleForm.resetFields()
    },
    cleanInfo() {
      clearTimeout(this.timeOutCount)
    },
    //   回显
    openHook() {
      this.$nextTick((a) => {
        this.showNumInput = false
        this.refNum = 60 * 5 + 1
        this.clearData(this.rowData)
        console.log(this.rowData)
        if (this.rowData) {
          // 修改
          for (let key in this.dataForm) {
            this.dataForm[key] = this.rowData[key]
          }

          let info = {
            project_id: this.rowData.group__cate__project_id,
          }
          const formData = new FormData()
          for (let key in info) {
            formData.set(key, info[key])
          }

          this.gainwxList(formData)
        } else {
          this.loading = false
        }

        //审核前返回数据
        const formData1 = new FormData()
        console.log(this.rowData)
        formData1.set('phone', this.rowData.phone)
        formData1.set('wx_user_id', this.rowData.wx_user_id)
        power_info(formData1).then((res) => {
          if (res.code == 200) {
            this.feijiuDate = res.data
          }
        })
      })
    },
  },
}
</script>
<style lang="scss">
.user-add-or-update {
  .el-tag {
    position: relative;
    right: 5px;
    z-index: 1;
    height: 40px;
    line-height: 40px;
    border-radius: 0 5px 5px 0;
    padding-left: 15px;
  }

  .my-email {
    .el-input__inner {
      border-radius: 5px 0 0 5px;
    }
  }
}

/*

  */

.fileInput {
  padding-right: 0;
}
.feijiu_f {
  margin: 0;
}
h2.feijiu_f {
  font-size: 14px;
}
.feijiu_f span {
  margin-right: 45px;
}
</style>
